<template>
  <div class="community-box">
    <!--场所地址搜索框-->
    <div class="search-input w100" style="display: flex; justify-content: flex-start; align-items: stretch" v-if="!isView && !isEdit">
      <el-autocomplete v-model="queryString" :fetch-suggestions="querySearchAsync" placeholder="请输入场所地址"
                       style="width: 240px" @select="handleSelect">
      </el-autocomplete>
      <el-button type="primary" slot="append" @click="search">搜索</el-button>
    </div>
    <div class="transparent" v-if="!isView"></div>
    <!--场所预览-->
    <el-form :model="communityForm" label-width="100px" class="demo-form communityForm" v-if="isView">
      <div class="title">场所信息</div>
      <el-form-item :label="`${item.label}：`" v-for="(item, index) in listKey" :key="index">
        <div class="view-form" :title="communityForm[item.name]">{{communityForm[item.name]}}</div>
      </el-form-item>
      <el-form-item>
        <el-button @click="cancel" class="cancel-btn function-btn">取  消</el-button>
      </el-form-item>
    </el-form>
    <!--场所编辑，修改-->
    <el-form :model="communityForm" :rules="rules" ref="communityForm"
             label-width="70px" class="demo-form communityForm" v-if="!isView">
      <div class="title">场所信息</div>
      <el-form-item label="区域名称" prop="areaName">
        <el-input v-model="communityForm.areaName" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="场所名称" prop="communityName">
        <el-input v-model="communityForm.communityName"></el-input>
      </el-form-item>
      <el-form-item label="场所地址" prop="address">
        <el-input v-model="communityForm.address"></el-input>
      </el-form-item>
      <el-form-item label="坐标信息" prop="position">
        <el-input v-model="communityForm.position" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item style="margin-bottom: 40px" class="btns">
        <el-button @click="cancel" class="cancel-btn function-btn">取  消</el-button>
        <el-button type="primary" class="function-btn" @click.stop="sure('communityForm')">确  定</el-button>
      </el-form-item>
    </el-form>
    <div id="map" style="display: none"></div>
  </div>
</template>

<script>
  import BMap from 'BMap'
  // import { regionDataPlus } from 'element-china-area-data'
  import { regionDataPlus } from 'static/js/regionData'
  import Config from '../../../../config'
  import { mapGetters } from 'vuex'
  export default {
    name: 'CommunityBox',
    props: {
      isView: {
        type: Boolean,
        default: false
      },
      communityForm: {
        type: Object,
        default: function () {
          return {
            areaName: '',
            communityName: '',
            position: '',
            // dfdf
            devtype: 'nbiot',
            devname: 'fireplug',
            site_name: '环普腾飞科汇城',
            site_serialno: 'id',
            country: '86',
            province: '610000',
            city: '610100',
            district: '610113',
            street: '鱼化寨',
            community: '环普腾飞科汇城',
            address: '',
            gps_lon: '108.12345',
            gps_lat: '34.12345',
            site_phone: '',
            site_status: 'normal'
          }
        }
      },
      infoArr: {
        type: Array,
        default () {
          return []
        }
      }
    },
    data () {
      return {
        queryString: '',
        listKey: [
          {
            name: 'areaName',
            label: '区域名称'
          },
          {
            name: 'communityName',
            label: '场所名称'
          },
          {
            name: 'address',
            label: '场所地址'
          },
          {
            name: 'position',
            label: '坐标信息'
          }
        ],
        rules: {
          areaName: [
            { required: true, message: '请输入区域名', trigger: 'blur' }
          ],
          communityName: [
            { required: true, message: '请输入场所名', trigger: 'blur' },
          ],
          address: [
            { required: true, message: '请输入地址', trigger: 'blur' }
          ],
          position: [
            { required: true, message: '坐标信息不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
      ...mapGetters('user', {
        role: 'getRole'
      }),
      isEdit () {
        return this.$route.path.includes('edit') ? true : false
      }
    },
    methods: {
      /**
       * 根据用户输入进行搜索
       * */
      querySearchAsync(queryString, cb) {
        if (!queryString) {
          cb([])
          return
        }
        this.$emit('search', queryString, cb)
      },
      /**
       * 点击按钮进行搜索
       * */
      search () {
        if (this.queryString === '') {
          this.$message.warning('关键字不能为空')
          return
        }
        this.$emit('search', this.queryString)
      },
      /**
       * 处理下拉菜单中选中事件
       * */
      handleSelect (item) {
        console.log(item)
        this.$emit('select', item)
      },
      cancel () {
        this.$emit('hide', 'cancel')
      },
      sure (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.save()
          } else {
            this.$message(
              {
                message: '格式不正确',
                type: 'warning'
              }
            )
            return false
          }
        })
      },
      /**
       * 保存数据
       * */
      save () {
        let url = ``
        const path = this.$route.path
        if (path.includes('create')) {
          url += `${Config.DEVICE_MANAGE_URL}/final_equipsite/add`
        } else if (path.includes('edit')) {
          url += `${Config.DEVICE_MANAGE_URL}/final_equipsite/modify`
        }

        const param = this.handleParam()
        console.log(url)
        console.log(param)
        this.$http.post(url, param)
          .then(data => {
            this.$emit('hide', true)
          })
          .catch(e => {
            this.$emit('hide', false)
          })
      },
      /**
       * 对给后台的数据进行处理
       * */
      handleParam () {
        const param = this.communityForm
        param.site_name = param.communityName
        delete param.areaName
        delete param.communityName
        delete param.position
        // 如果是测试类型的角色，5表示测试类型角色，加一个字段
        if (this.role[0].sort === 93) {
          param.site_type = 'test'
        }
        return param
      }
    }
  }
</script>

<style lang="scss" scoped>
  .community-box {
    width: 300px;
    .search-input {
      -webkit-box-shadow: 5px 5px 0px 0px rgba(34, 34, 34, 0.1);
      box-shadow: 5px 5px 0px 0px rgba(34, 34, 34, 0.1);
      & /deep/ .el-input__inner {
        height: 36px;
        border-radius: 0;
      }
      & /deep/ .el-input-group__append {
        width: 60px;
        height: 24px;
        background: #eb3838;
        border-color: #eb3838;
        border-radius: 0;
        color: white;
      }
      & /deep/ .el-input-group__append:hover {
        background: #ff5858;
        border-color: #ff5858;
        color: white;
      }
      & /deep/ .el-input__inner:focus {
        border-color: #e03131;
      }
      & /deep/ .el-button {
        padding: 11px 10px;
        height: 36px;
        border-radius: 0;
      }
    }
    .transparent {
      background-color: transparent;
      height: 20px;
    }
    .communityForm {
      width: 300px;
      background: #fff;
      -webkit-box-shadow: 5px 5px 0px 0px rgba(34, 34, 34, 0.1);
      box-shadow: 5px 5px 0px 0px rgba(34, 34, 34, 0.1);
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 8px 16px;
      & /deep/ .el-form-item__label {
        font-size: 12px;
      }
      .title {
        font-size: 16px;
        font-weight: bold;
        color: #eb3838;
        margin: 8px 0 24px 0;
      }
      .btns /deep/ .el-form-item__content {
        margin: 0 !important;
        text-align: center;
      }
      .view-form {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden
      }
    }
  }
</style>
